MCP server that exposes the Lustre component library to AI coding agents (Claude Code, Cursor, etc.).
Lustre is a premium Flutter component library with three beautiful themes:
- Clean: Subtle borders, soft shadows, modern
- Bold: Crisp borders, high contrast, confident
- Glass: Frosted glass surfaces, gradient backgrounds, premium
All 46+ components support light/dark mode and theme switching.
npm install -g lustre-mcpIn claude_code_config.json:
{
"mcpServers": {
"lustre": {
"command": "npx",
"args": ["lustre-mcp"]
}
}
}Similar setup in .cursor/rules.json or via the Cursor settings panel.
List all available components with descriptions.
Optional: category filter (navigation, cards, lists, forms, feedback, data_display, surfaces, layout)
Search for components by description.
Input: query (string)
Output: Matching components with names and descriptions
Get complete Dart source code for a component.
Input:
-
component(string, required) - Component name (e.g., "profile_card") -
theme(string) - Theme variant: "clean", "bold", or "glass" (default: clean) -
brightness(string) - Color scheme: "light" or "dark" (default: light)
Get design tokens for a theme (colors, typography, spacing).
Input:
-
theme(string) - Theme variant: "clean", "bold", or "glass" -
brightness(string) - Color scheme: "light" or "dark"
Get a complete page layout with example components.
Input:
-
pattern(string) - Layout type: "settings_page", "profile_page", "dashboard", or "onboarding" -
theme(string) - Theme variant (default: clean)
Get setup instructions for using Lustre in a Flutter project.
Input:
-
theme(string) - Default theme: "clean", "bold", or "glass"
Free Tier:
- List and search all components
- Get 15 core components
- Get design tokens and layout patterns
- Get setup instructions
Pro Tier ($12/month):
- All 46+ components
- All tools, all themes, all features
- Early access to new components
- Priority support
# Install dependencies
npm install
# Build TypeScript
npm run build
# Run in development mode
npm run dev
# Start production server
npm start
- Navigation (5): AppBar, BottomNav, Tabs, Breadcrumb, SegmentedControl
- Cards (7): Card, InfoCard, ProfileCard, ProductCard, PricingCard, StatCard, TestimonialCard
- Lists (5): SettingsList, ChatList, ContactList, NotificationList, ActionList
- Forms (7): TextField, Toggle, Slider, Dropdown, SearchBar, CheckboxGroup, DatePicker
- Inputs (1): Button (primary, secondary, outline)
- Feedback (6): Dialog, Snackbar, BottomSheet, LoadingState, Toast, EmptyState
- Data Display (5): Badge, ProgressBar, ProgressRing, StatCounter, Avatar
- Surfaces (4): Section, Divider, GlassPane, GradientHeader
- Layout (6): SettingsPage, ProfilePage, DashboardGrid, OnboardingFlow, ListDetailLayout, AuthPage
MIT